<script setup lang="ts">
import { useLmsStoreHook } from "@/store/modules/lms";
import {
  AddCourseFolder,
  GetCoursewareFolderList,
  CreateCoursewareFolder
} from "@/api/lms";
import { ref, onMounted } from "vue";

const lmsStore = useLmsStoreHook();

const folderForm = ref<AddCourseFolder>({
  name: "",
  parentId: "1",
  describe: ""
});

const list = ref([]);
const emit = defineEmits(["onsearch"]);
const clickSubmit = () => {
  CreateCoursewareFolder(folderForm.value).then(() => {
    lmsStore.addCoursewareFolderDialog = false;
    emit("onsearch");
  });
};

onMounted(() => {
  GetCoursewareFolderList().then(res => {
    list.value = res;
  });
});
</script>

<template>
  <el-dialog
    v-model="lmsStore.addCoursewareFolderDialog"
    title="添加课件目录"
    width="500px"
  >
    <el-form ref="elForm" :model="folderForm" label-width="100px">
      <el-form-item label="父目录">
        <el-select
          v-model="folderForm.parentId"
          placeholder="请选择父级目录"
          clearable
          :style="{ width: '100%' }"
        >
          <el-option
            v-for="(item, index) in list"
            :key="index"
            :label="item.name"
            :value="item.folderId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="目录名称">
        <el-input
          v-model="folderForm.name"
          placeholder="请输入课件编号"
          :maxlength="20"
          clearable
        />
      </el-form-item>
      <el-form-item label="描述信息">
        <el-input
          v-model="folderForm.describe"
          placeholder="请输入描述信息"
          :maxlength="200"
          type="textarea"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="lmsStore.addCoursewareFolderDialog = false"
          >取消</el-button
        >
        <el-button type="primary" @click="clickSubmit"> 提交 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped></style>
